<style lang='less' >
</style>

<template>
  <div id="addCouponPage">
    <el-steps :space="200" :active="stepActive" finish-status="success" v-show='showStep != 1'>
      <el-step :title='item' :key='index' v-for='(item, index) in stepsArr2' ></el-step>
    </el-steps>
    <el-steps :space="200" :active="stepActive" finish-status="success" v-show='showStep == 1'>
      <el-step :title='item' :key='index' v-for='(item, index) in stepsArr3' ></el-step>
    </el-steps>
    <transition name="fade" mode="out-in">
      <router-view
      v-on:setTitleMsg='setTitleMsg'
      v-on:setStepsArr='setStepsArr'
      v-on:setStepActive='setStepActive'
      ></router-view>
    </transition>
  </div>
</template>

<script>
    import navTitle from 'components/Title.vue';

    export default {
      props:[''],
      components:{
          navTitle,
      },
      data(){
        return{
          stepActive: 1,
          showStep:0,//0:'stepsArr2' , 1:'stepsArr3'  因打包出来在来回切换steps时会导致icon上的数字显示增加！！
          stepsArr:[],
          stepsArr2:['选择卡券类型','完成创建'],
          stepsArr3:['选择卡券类型','填写基本信息','完成创建'],


        }
      },
      methods:{
        setTitleMsg(e){
          this.$emit('setTitleMsg', e)
        },
        setStepsArr(e){
          this.showStep = e;
        },
        setStepActive(e){
          this.stepActive = e;
        },
        setpNext(){
          let len = this.steps.length;
          if(this.active ++> len) this.active = len;
        },

      },
      created(){

      },
      mounted(){

      },
    }
</script>